<!-- 项目详情页 -->
<template>
  <div class="py-4 container-fluid">
    <div class="mt-4 row">
      <div class="col-12">
        <div class="card">
          <div class="card-body">
            <div class="d-flex">
              <div class="col-8 col-xm-12 border" style="height: 410px"></div>
              <div class="col-4">
                <div
                  class="d-flex h-100 justify-content-between"
                  style="padding: 24px 0 24px 24px; flex-direction: column"
                >
                  <div class="" style="padding-left: 24px">
                    <div class="d-flex align-items-center">
                      <div class="me-3">
                        <img :src="detail.image" class="rounded" width="30" />
                      </div>
                      <h6 class="mb-0 me-2" style="font-size: 30px">
                        {{ detail.name }}
                      </h6>
                    </div>
                    <div class="text-secondary text-lg">Price</div>
                    <h5 class="mb-3">$ {{ detail.current_price }}</h5>
                    <span
                      class="badge badge-sm text-sm"
                      :class="
                        detail.price_change_percentage_24h > 0
                          ? 'badge-success'
                          : 'badge-danger'
                      "
                    >
                      {{ detail.price_change_percentage_24h }}%
                    </span>
                  </div>
                  <div class="px-4 pt-4 border-top">
                    <soft-button
                      v-if="detail.status == 0"
                      class="text-capitalize py-2"
                      variant="gradient"
                      color="info"
                      full-width
                      @click="addFavorites(detail.id)"
                    >
                      <i class="iconfont icon-aixin_shixin me-1"></i>
                      Add Favorites
                    </soft-button>
                    <soft-button
                      v-else
                      class="text-capitalize py-2"
                      variant="gradient"
                      color="secondary"
                      full-width
                      >Remove Favorites
                    </soft-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 历史信号 -->
        <signal-history />
        <!-- 历史回测 -->
        <SignalBackTest />
      </div>
    </div>
  </div>
</template>

<script>
import { projectInfo, projectChoose } from "@/request/api.js";
import SoftButton from "@/components/SoftButton.vue";
import SignalHistory from "./signalHistory.vue";
import SignalBackTest from "./signalBackTest.vue";
export default {
  components: {
    SoftButton,
    SignalHistory,
    SignalBackTest,
  },
  data() {
    return {
      detail: {},
    };
  },
  created() {
    this.getProjectInfo();
  },
  methods: {
    // 添加或取消自选
    async addFavorites(id) {
      let params = {
        project_id: id,
        status: this.detail.status == 1 ? "0" : "1",
      };
      let res = await projectChoose(params);
      if (res.code == 200) {
        this.getProjectInfo();
      }
    },
    // 获取项目详情
    async getProjectInfo() {
      let res = await projectInfo({ project_id: this.$route.params.id });
      this.detail = res;
    },
  },
};
</script>

<style></style>
